<template>
  <div class="scene">
    <div class="scen-one">
      <img src="https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/wholehome/intelligent-scenes/imgs/huawei-whole-home-intelligent-scenes-key-visual@2x.webp" alt="">
      <div class="kv-textWrap">
        <h3>HarmonyOS 智慧场景，常用常新</h3>
        <p>
          以声音，唤起沉浸视界<br/>
          让光影，营造温馨氛围<br/>
          用感官，享受舒适环境<br/>
          ......<br/>
          每个角落，都有家的理想模样
        </p>
      </div>
    </div>
    <div class="scen-two">格调场景</div>
    <div class="scen-video">
      <div class="video_one showOne"  v-if="index === 1" >
        <video autoplay loop src="https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/wholehome/intelligent-scenes/imgs/huawei-whole-home-movie-viewing-mode.mp4"></video>
        <div class="scen-videoX">
          <h3 class="videox-one">
            把客厅变成音乐厅，<br/>
           让家里多个电影院 <br/>
          </h3>
          <span>
            智慧屏与音箱一拍即合，构成左右声道环绕立体声，<br/>
            室内灯光渐暗，营造影院效果，一场好戏，在家震撼开演。
          </span>
        </div>
      </div>
      <div class="video_one showTwo" v-if="index === 2" >
        <video autoplay loop src="https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/wholehome/intelligent-scenes/imgs/huawei-whole-home-dining-mode.mp4"></video>
        <div class="scen-videoX">
          <h3 class="videox-one">
            舌尖上的艺术盛宴<br/>
          </h3>
          <span>
            就餐模式，暖色灯光为美食添加诱人滤镜；<br/>
            烛光模式，摇曳光影中浪漫音乐流转；<br/>
            茶叙模式，银辉洒落，饮半盏清茶，享半日清欢。<br/>
            不同氛围灯光，为一餐一食着色，缔造丰富的生活感受。
          </span>
        </div>
      </div>
      <div class="video_one showThree" v-if="index === 3">
        <video autoplay loop src="https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/wholehome/intelligent-scenes/imgs/huawei-whole-home-party-mode.mp4"></video>
        <div class="scen-videoX">
          <h3 class="videox-one">
            在家开轰趴，<br/>
            氛围感拉满<br/>
          </h3>
          <span>
            生日、节日、纪念日等重要时刻，<br/>
            用缤纷光影搭配动感音乐，为每一次欢聚加“氛”。
          </span>
        </div>
      </div>
      <div class="videoShow">
        <div 
          @click="handleChange(1)" 
          :class="index === 1 ?'active':''"
        ><span>观影模式</span></div>
        <div @click="handleChange(2)" :class="index === 2 ?'active':''"><span>就餐模式</span></div>
        <div @click="handleChange(3)"  :class="index === 3 ?'active':''"><span>party 模式</span></div>
      </div>
    </div>
    <div class="scen-two">便捷场景</div> 
    <div class="scendeo">
      <div class="video_one showOne"  v-if="index2 === 1" >
        <video autoplay loop src="https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/wholehome/intelligent-scenes/imgs/huawei-whole-home-back-to-home-mode.mp4"></video>
        <div class="scen-videoX">
          <h3 class="videox-one">
            一键回家模式，<br/>
          和惬意撞个满怀
          </h3>
          <span>
            步入家门，从玄关到客厅，温馨灯光次第渐亮；环境智控系统预判环境温度、<br/>
            湿度、空气质量，自动为你调配至适宜状态。卸下一日疲惫，独享一方天地。
          </span>
        </div>
      </div>
      <div class="video_one showTwo" v-if="index2 === 2" >
        <video autoplay loop src="https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/wholehome/intelligent-scenes/imgs/huawei-whole-home-lightening.mp4"></video>
        <div class="scen-videoX">
          <h3 class="videox-one">
            灯随人动，关切随行<br/>
          </h3>
          <span>
            深夜归家或起夜，廊道夜灯随步行轨迹亮起，不用频繁开关灯，每一步都有光亮温暖陪伴。
          </span>
        </div>
      </div>
      <div class="videoShow">
        <div  @click="handleChange2(1)" :class="index2 === 1 ?'active':''"><span>回家模式</span></div>
        <div @click="handleChange2(2)" :class="index2 === 2 ?'active':''"><span>灯随人动</span></div>
      </div>
    </div>
    <div class="scen-two">舒适场景</div> 
    <div class="scendeox">
      <div class="video_one showOne"  v-if="index3 === 1" >
        <video autoplay loop src="https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/wholehome/intelligent-scenes/imgs/huawei-whole-home-dynamic-shading.mp4"></video>
        <div class="scen-videoX">
          <h3 class="videox-one">
            让每一寸光，舒适得恰到好处<br/>
          </h3>
          <span>
           当光照传感器检测到刺眼光线，遮阳系统将自动开启，<br/>
            过滤强光照射，为你营造自然柔和的采光环境。
          </span>
        </div>
      </div>
      <div class="video_one showTwo" v-if="index3 === 2" >
        <video autoplay loop src="https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/wholehome/intelligent-scenes/imgs/huawei-whole-home-dynamic-water-temperature-adjustment.mp4"></video>
        <div class="scen-videoX">
          <h3 class="videox-one">
            任凭四季变化，温水无需等待<br/>
          </h3>
          <span>
            触发回家模式，零冷水模式自动打开，水温自适应能力让水温随四季、地理位置、个人喜好自动调整。
          </span>
        </div>
      </div>
      <div class="video_one showThree" v-if="index3 === 3" >
        <video autoplay loop src="https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/wholehome/intelligent-scenes/imgs/huawei-whole-home-sleeping-aid-mode.mp4"></video>
        <div class="scen-videoX">
          <h3 class="videox-one">
            科学助眠，提升睡眠质量<br/>
          </h3>
          <span>
            卧室主照明灯缓缓熄灭，空调自动调节为睡眠模式，窗帘缓缓关闭，<br/>
            智能音箱播放白噪音帮助舒缓情绪，助你安然入梦。<br/>
          </span>
        </div>
      </div>
      <div class="video_one showTwo" v-if="index3 === 4" >
        <video autoplay loop src="https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/wholehome/intelligent-scenes/imgs/huawei-whole-home-wake-up-at-night-mode.mp4"></video>
        <div class="scen-videoX">
          <h3 class="videox-one">
            微光呵护，安心起夜<br/>
          </h3>
          <span>
            夜间起床，床下感应夜灯带旋即亮起，看清脚下的同时也不打扰家人的美梦。<br/>
          </span>
        </div>
      </div>
      <div class="videoShow">
        <div @click="handleChange3(1)" :class="index3 === 1 ?'active':''"><span>动态遮阳</span></div>
        <div @click="handleChange3(2)" :class="index3 === 2 ?'active':''"><span>动态零冷水</span></div>
        <div @click="handleChange3(3)" :class="index3 === 3 ?'active':''"><span>助眠模式</span></div>
        <div @click="handleChange3(4)" :class="index3 === 4 ?'active':''"><span>夜起模式</span></div>
      </div>
    </div>
    <div class="scen-two">健康场景</div>
    <div class="scen-three">
      <video autoplay loop src="https://consumer.huawei.com//content/dam/huawei-cbg-site/cn/mkt/wholehome/intelligent-scenes/imgs/huawei-whole-home-rhythmic-lighting.mp4"></video>
      <div class="tre">
        <h2>节律照明，关爱你的生物钟</h2>
        <span>
          清晨唤醒身体满满能量，午后营造小憩的慵懒氛围……HarmonyOS AI 引擎获取时间、<br/>
          当前室内光线等多个条件后，借助节律照明算法分析，营造出符合自然节律的健康光照环境。
        </span>
      </div>
    </div>
    <div class="scen-two">交互场景</div>
    <div class="scen-four" style="flex-direction: row-reverse;">
        <div class="four-one">
          <h2>一碰极简交房，<br/>
            惊喜纷至沓来</h2>
          <div class="fourNfc">NFC 轻轻一碰*，30 秒即可完成上百设备<br/>
          的全屋配置，全屋智能一手掌握。</div>
          <span>*NFC 标签安装于全屋智能主机内，仅部分 HarmonyOS 2 或 EMUI 9.0 及以上版本的华为手机支持此功能，后续会逐步开放更多机型支持此功能。一碰交房功能目前仅支持 PLC 组件设备，暂不支持蓝牙或 Wi-Fi 连接的设备，后续功能升级以官方信息为准。</span>
        </div>
        <div class="four-two">
          <img src="https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/wholehome/intelligent-scenes/imgs/huawei-whole-home-one-click-handover@2x.webp" alt="">
        </div>
    </div>
    <div style="height:50px;background:black;"></div>
    <div class="scen-four" >
        <div class="four-one">
          <h2>交互合你心意，<br/>
            随时听你号令</h2>
          <div class="fourNfc">面板交互，App 交互，语言交互，无感交互。</div>
          </div>
        <div class="four-two">
          <img src="https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/wholehome/intelligent-scenes/imgs/huawei-whole-home-multi-scene-interaction@2x.webp" alt="">
        </div>
    </div>
    <div style="height:80px;background:black;"></div>
    <Btmx></Btmx>
  </div>
</template>

<script>

export default {
  components:{
  },
  mounted(){
    window.scrollTo(0,0)
  },
    data() {
        return {
            index: 1,
            index2:1,
            index3:1
        };
    },
    methods: {
        handleChange(i) {
            this.index = i;
        },
         handleChange2(i) {
            this.index2 = i;
        },
         handleChange3(i) {
            this.index3 = i;
        }
    }
}
</script>

<style lang="scss" scoped>
$corShow:white;
$cor:#585858;
.videoShow{
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translate(-50%, 0);
    display: flex;
    justify-content: center;
    font-size: 18px;
    color: $cor;
  div{
    margin: 0 20px;
    width: 90px;
    text-align: center;
    cursor: pointer;
    border-top: 2px solid $cor;
  }
  .active{
      color: $corShow;
      border-top: 2px solid $corShow;
    }
}
.scen-video,.scendeo,.scendeox{
  position: relative;
  background: black;
  .video_one{
    position: relative;
    video{
      width: 100%;
      position: relative;
    }
    .scen-videoX{
      position: absolute;
      top: 20%;
      left: 10%;
      color: white;
      .videox-one{
        font-weight: 700;
      }
      span{
        display: inline-block;
        font-size: 1.14583vw;
        margin-top: 1.5625vw;
      }
    }
  }
    
  }
.scen-one{
  position: relative;
  img{
    width: 100%;
  }
  .kv-textWrap{
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
    color: #fff;
    text-align: center;
    h3{
      font-size: 4.16667vw;
      font-weight: 700;
      margin-bottom: 0;
    }
    p{
      font-size: 2.5vw;
      margin-top: 2.08333vw;
    }
  }
}
.scen-two{
  background-color: black;
  text-align: center;
  color:#666666;
  font-size: 40px;
  padding-top: 100px;
  padding-bottom: 50px;
}
.scen-three{
  background-color: black;
  color: white;
  font-weight: bold;
  position: relative;
  text-align: center;
  video{
    width: 100%;
  }
  h2{
    margin-bottom: 20px;
  }
  .tre{
    position: absolute;
    left: 50%;
    top: 20%;
    transform: translate(-50%,-20%);
  }
}
.scen-four{
  display: flex;
  background: black;
  color: white;
  padding: 0 8.85417vw 0 13.02083vw ;
  .four-one {
    width: 40%;
    padding: 80px 90px 55px 40px;
  }
  .four-two{
    width: 60%;
  }
  h2{
    font-weight: bold;
  }
  img{
    width: 45vw;
  }
  span{
    font-size: 12px;
    color:#7f7f7f;
  }
  .fourNfc{
      padding: 20px 0 50px 0;
  }
}
</style>